<!DOCTYPE HTML>
<html>
	<head>
		<title>.RGB - The Game</title>
	</head>
	<body
			ontouchstart='touchStart(event)'
			ontouchmove	='touchMove(event)'
			ontouchend	='touchEnd(event)'
			onclick		='stop(event)'
			ondblclick	='stop(event)'
			onresize	='stop(event)'
			ongesture	='stop(event)'
	>
		<div id="dom">
			<div id="game_menu" class="game_container menu">
				<header><h1>RGB</h1></header>
				<footer>
					<input type="button" id="launch_game" class="btn btn-orange" value="Launch Game" />
					<input type="button" id="score_board" class="btn btn-orange" value="High Scores" />
				</footer>
			</div>
			<div id="game_scores" class="game_container menu">
				<header><h1>High Scores</h1></header>
				<table id="scores">
					<tr>
						<th>Name</th>
						<th>Score</th>
						<th>Time</th>
					</tr>
				</table>
				<footer>
					<input type="button" id="reset" class="btn btn-orange" value="Clear" />
					<input type="button" id="go_back" class="btn btn-orange" value="Back" />
				</footer>
			</div>
			<div id="game_area" class="game_container">
				<canvas id='canvas' width='160px' height='144px'></canvas>
			</div>
			<div id="game_over" class="game_container menu">
				<header>
					<h1>Game over</h1>
				</header>

				<p>Your score is : <b id="score">score</b></p>

				<p>Your time is : <b id="chrono">chrono</b></p>

				<p id="appreciation">appreciation</p>

				<div id="name">
					<label>Your name : </label>
					<span id="letter_1" class="letter" data-idx="1">A</span>
					<span id="letter_2" class="letter" data-idx="1">A</span>
					<span id="letter_3" class="letter" data-idx="1">A</span>
				</div>

				<footer>
					<input type="button" id="tryagain" class="btn btn-orange" value="Try again" />
					<input type="button" id="highscores" class="btn btn-orange" value="Save score" />
				</footer>
			</div>
		</div>

		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="src/css/fonts.css">
		<link rel="stylesheet" type="text/css" href="src/css/style.css">
		<link rel="stylesheet" type="text/css" href="src/css/main_menu.css">

		<!-- MISC TOOLS -->
		<script type="text/javascript" src="src/js/misc/Tools.js"></script>
		<script type="text/javascript" src="src/js/misc/DB.js"></script>

		<!-- MENU -->
		<script type="text/javascript" src="src/js/Menu.js"></script>

		<!-- MAIN -->
		<script type="text/javascript" src="src/js/Keyboard.js"></script>
		<script type="text/javascript" src="src/js/Mouse.js"></script>
		<script type="text/javascript" src="src/js/Mobile.js"></script>
		<script type="text/javascript" src="src/js/Game.js"></script>
		<script type="text/javascript" src="src/js/Player.js"></script>
		<script type="text/javascript" src="src/js/Enemy.js"></script>
		<script type="text/javascript" src="src/js/Bonus.js"></script>
		<script type="text/javascript" src="src/js/Xhr.js"></script>
		<script type="text/javascript">

		var DEVICE = 'BROWSER';
		var SET_TIMEOUT = false;

		var XSIZE = screen.width;
		var YSIZE = screen.height;

		//CANVAS
			//Crée le canvas
			ctx = $('canvas').getContext('2d');
		
		var GAME_SPEED = 1; 

		//DIMENSIONS	
			//Récupère hauteur 
			MAX_HEIGHT = $('canvas').height;
			//Récupère longueur
			MAX_WIDTH = $('canvas').width;
		
		var GAME_SPEED = 1;

		var DEBUG_NIGHTLY = true;

		var COLORS = [];
		COLORS['r'] = ['255','254', '97',  '0', '0'];
		COLORS['g'] = ['255',  '0','254', '97', '0'];
		COLORS['b'] = ['255', '45',  '0','254', '0'];
		COLORS['a'] = ['.1', '1', '1', '1', '1'];
		
		//Initialisation des GameObject
		// GAME
			game.init("P1");

		var CurrentGameObject = game;

		//Gestion des framerates
		var lastLoop = new Date;
		function run() {

			switch (game.STATE) {
				case 'MENU' : 
					removeClass($('game_menu'), 'hide');
					addClass($('game_scores'), 'hide');
					addClass($('game_area'), 'hide');
					addClass($('game_over'), 'hide');

					initGameMenu();

					game.STATE = 'LOADED';
				break;

				case 'GAME' :
					addClass($('game_menu'), 'hide');
					addClass($('game_scores'), 'hide');
					removeClass($('game_area'), 'hide');
					addClass($('game_over'), 'hide');

					CurrentGameObject.input();
					CurrentGameObject.update();
				break;

				case 'PAUSE' :
					game.STATE = 'LOADED';
				break;

				case 'GAMEOVER' :
					addClass($('game_menu'), 'hide');
					addClass($('game_scores'), 'hide');
					addClass($('game_area'), 'hide');
					removeClass($('game_over'), 'hide');
					game.STATE = 'LOADED';
				break;

				case 'SCORES' :
					addClass($('game_menu'), 'hide');
					removeClass($('game_scores'), 'hide');
					addClass($('game_area'), 'hide');
					addClass($('game_over'), 'hide');
					initHighScoresMenu();

					game.STATE = 'LOADED';
				break;

				case 'LOADED' :
				break;
			}

			var thisLoop = new Date;
		    CurrentGameObject.fps = 1000 / (thisLoop - lastLoop) | 0;
		    lastLoop = thisLoop;

		    requestAnimationFrame(run);
		}
		run();		
		
		</script>		
	</body>
</html>